<script setup>
	import { reactive, ref } from 'vue'
	import OrderList from './components/OrderList.vue'
	import use订单 from "@/pagesOrder/use订单"
	const 订单 = use订单()
	// 获取页面参数
	const { zhuangtai } = defineProps({
		zhuangtai: String
	})
	
	const tabs = 订单.状态组

	function 点tab(index) {
		// console.log('index: ', index);
		if (current.value !== index) {
			current.value = index
		}
	}
	const current = ref(0)
</script>

<template>
	<view class="page">
		<!-- tabs -->
		<view class="tabs">
			<text class="item" v-for="(item, index) in tabs" :key="item.状态" @tap="点tab(index)">
				{{ item }}
			</text>
			<view class="cursor" :style="{ left: current * 20 + '%' }"></view>
		</view>
		<swiper  :current="current">
			<swiper-item v-for="(item,index) in tabs" :key="item">
				<OrderList v-show="index==current" :状态="item" />
			</swiper-item>
		</swiper>
	</view>
</template>

<style lang="scss" scoped>
	page {
	  height: 100%;
	  overflow: hidden;
	}
	// tabs
	.tabs {
		display: flex;
		justify-content: space-around;
		line-height: 60rpx;
		// margin: 0 10rpx;
		background-color: #fff;
		box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
		position: relative;
		z-index: 9;

		.item {
			flex: 1;
			text-align: center;
			padding: 20rpx;
			font-size: 28rpx;
			color: #262626;
		}

		.cursor {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 20%;
			height: 6rpx;
			padding: 0 50rpx;
			background-color: #27ba9b;
			/* 过渡效果 */
			transition: all 0.4s;
		}
	}

	// swiper
	.swiper {
		background-color: #f7f7f8;
	}
</style>